<template>
  <view class="law-container">
    <view
      class="top"
      :style="{
        background: 'url(' + homebg + ') no-repeat',
        backgroundSize: '100% 100%',
      }"
    >
      <text class="title">欢迎精英律师加入我们</text>
      <text class="sub-title">请填写资料</text>
    </view>
    <view class="example">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item
          label="真实姓名"
          prop="name"
          borderBottom
          ref="item1"
          labelWidth="65"
        >
          <u-input
            border="none"
            v-model="form.name"
            placeholder="请输入您的姓名"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="执业证号"
          prop="num"
          borderBottom
          ref="item1"
          labelWidth="65"
        >
          <u-input
            v-model="form.num"
            placeholder="请输入您的执业证号"
            border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="执业律所"
          prop="company"
          borderBottom
          ref="item1"
          labelWidth="65"
        >
          <u-input
            v-model="form.company"
            placeholder="请输入您的执业证号"
            border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="联系方式"
          prop="phone"
          borderBottom
          ref="item1"
          labelWidth="65"
        >
          <u-input
            v-model="form.phone"
            placeholder="请输入您的联系方式"
            border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="地区"
          prop="address"
          borderBottom
          ref="item1"
          labelWidth="65"
        >
          <u-input
            v-model="form.address"
            placeholder="请输入您的所在城市名称"
            border="none"
          ></u-input>
        </u-form-item>
        <uni-section title="上传执业资格证" type="line"></uni-section>
        <view class="flex-row">
          <u-upload
            :fileList="certificateList"
            name="6"
            :maxCount="1"
            width="100"
            height="100"
            @afterRead="afterRead($event, 'certificateList')"
            @delete="deletePic($event, 'certificateList')"
          >
            <image
              src="/static/images/mine/file.png"
              mode="widthFix"
              style="width: 100px; height: 100px"
            ></image>
          </u-upload>
          <text>请上传您的律师执业资格证书</text>
        </view>

        <uni-section title="上传微信二维码" type="line"></uni-section>

        <view class="flex-row">
          <u-upload
            :fileList="wexinCodeList"
            name="6"
            :maxCount="1"
            width="100"
            height="100"
            @afterRead="afterRead($event, 'wexinCodeList')"
            @delete="deletePic($event, 'wexinCodeList')"
          >
            <image
              src="/static/images/mine/file.png"
              mode="widthFix"
              style="width: 100px; height: 100px"
            ></image>
          </u-upload>
          <text>请上传您的微信二维码</text>
        </view>

        <uni-section title="上传代理案件的判决书" type="line"></uni-section>

        <view class="flex-row">
          <u-upload
            :fileList="bookList"
            name="6"
            :maxCount="1"
            width="100"
            height="100"
            @afterRead="afterRead($event, 'bookList')"
            @delete="deletePic($event, 'bookList')"
          >
            <image
              src="/static/images/mine/file.png"
              mode="widthFix"
              style="width: 100px; height: 100px"
            ></image>
          </u-upload>
          <text>请上传代理案件的判决书</text>
        </view>
        <uni-section title="上传职业形象照" type="line"></uni-section>

        <view class="flex-row">
          <u-upload
            :fileList="photoList"
            name="6"
            :maxCount="1"
            width="100"
            height="100"
            @afterRead="afterRead($event, 'photoList')"
            @delete="deletePic($event, 'photoList')"
          >
            <image
              src="/static/images/mine/file.png"
              mode="widthFix"
              style="width: 100px; height: 100px"
            ></image>
          </u-upload>
          <view class="flex-column">
            <image
              src="/static/images/mine/ex3.png"
              mode="widthFix"
              style="width: 80px; height: 80px"
            ></image>
            <text>请上传职业形象照</text>
          </view>
        </view>

        <u-form-item prop="info" ref="item1" labelWidth="65">
          <u-textarea
            v-model="form.info"
            placeholder="请输入简历、教育经历、执业历程、擅长领域、执业成就等"
            count
            :height="100"
            :maxlength="200"
          ></u-textarea>
        </u-form-item>
      </u-form>
      <view class="marginTop">
        <view class="flex-row">
          <view class="radio" v-if="!radiovalue" @click="changeState"></view>
          <view class="radio-checked" v-else @click="changeState">
            <u-icon name="checkbox-mark" color="#fff" size="10px"></u-icon>
          </view>
          <view class="flex-row">
            <text style="margin-left: 10rpx">我已阅读并同意 </text>
            <text class="text-red" style="color: #e43d33"
              >《律师入驻协议》</text
            >
          </view>
        </view>
      </view>
      <view class="bottom">
        <u-button color="#e43d33" @click="submit">提交</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import Upload from "@/static/const/upload.js";
import { isEmptyArray } from "@/utils/common.js";
import bgBase64 from "@/static/const/bgBase64.js";
import config from "@/config.js";

export default {
  data() {
    return {
      imageURL: "/static/images/mine/txbg.png",
      form: {
        name: "",
        num: "",
        company: "",
        phone: "",
        address: "",
        info: "",
      },
      certificateList: [],
      wexinCodeList: [],
      bookList: [],
      photoList: [],
      radiovalue: false,
      radiolist: [
        {
          name: "我已阅读并同意《律师服务协议》",
        },
      ],
      rules: {
        name: {
          type: "string",
          required: true,
          message: "姓名为必填项",
          trigger: ["blur", "change"],
        },
        num: {
          type: "string",
          required: true,
          message: "执业证号为必填项",
          trigger: ["blur", "change"],
        },
        company: {
          type: "string",
          required: true,
          message: "执业律所为必填项",
          trigger: ["blur", "change"],
        },
        phone: {
          type: "string",
          required: true,
          message: "联系方式为必填项",
          trigger: ["blur", "change"],
        },
        address: {
          type: "string",
          required: true,
          message: "地址为必填项",
          trigger: ["blur", "change"],
        },
        info: {
          type: "string",
          required: false,
          message: "个人简介为必填项",
          trigger: ["blur", "change"],
        },
      },
      homebg: bgBase64.lawyerBg,
    };
  },
  onLoad() {},
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$nextTick(() => {
      this.$refs.form.setRules(this.rules);
    });
  },
  methods: {
    // 新增图片
    async afterRead(event, type) {
      uni.uploadFile({
        url: Upload.uploadUrl,
        filePath: event.file.url,
        name: "file",
        header: Upload.headers,
        success: (uploadFileRes) => {
          console.log(JSON.parse(uploadFileRes.data).fileName);

          switch (type) {
            case "certificateList":
              this.certificateList.push({
                url: config.baseUrl+JSON.parse(uploadFileRes.data).fileName,
              });
              break;
            case "wexinCodeList":
              this.wexinCodeList.push({
                url:config.baseUrl+JSON.parse(uploadFileRes.data).fileName,
              });
              break;
            case "bookList":
              this.bookList.push({
                url: config.baseUrl+JSON.parse(uploadFileRes.data).fileName,
              });
              break;
            case "photoList":
              this.photoList.push({
                url: config.baseUrl+JSON.parse(uploadFileRes.data).fileName,
              });
              break;
            default:
              break;
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    // 删除图片
    deletePic(event, type) {
      switch (type) {
        case "certificateList":
          this.certificateList.splice(event.index, 1);
          break;
        case "wexinCodeList":
          this.wexinCodeList.splice(event.index, 1);
          break;
        case "bookList":
          this.bookList.splice(event.index, 1);
          break;
        case "photoList":
          this.photoList.splice(event.index, 1);
          break;
        default:
          break;
      }
    },
    checkboxChange(event) {
      console.log(event);
    },
    //勾选协议
    changeState() {
      this.radiovalue = !this.radiovalue;
    },
    submit() {
      if (!this.radiovalue) {
        uni.showToast({
          title: "请勾选协议",
          icon: "none",
        });
        return;
      }
      if (!isEmptyArray(this.certificateList)) {
        this.form.certificate = this.certificateList[0].url;
      }
      if (!isEmptyArray(this.wexinCodeList)) {
        this.form.qrCode = this.wexinCodeList[0].url;
      }
      if (!isEmptyArray(this.bookList)) {
        this.form.judgment = this.bookList[0].url;
      }
      if (!isEmptyArray(this.photoList)) {
        this.form.professionalPhoto = this.photoList[0].url;
      }
      this.$refs.form
        .validate()
        .then((res) => {
          this.$store
            .dispatch("LawyerSettled", this.form)
            .then((res) => {
              uni.showToast({
                title: "提交成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            })
            .catch((err) => {
              uni.showToast({
                title: err.msg,
                icon: "none",
              });
            });
        })
        .catch((errors) => {
          uni.$u.toast("请填写完整信息");
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f7fa;
}

.law-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    height: 8rem;
    position: relative;
    background-size: 100% 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 1.5rem;
      color: #ffffff;
      margin-top: 1rem;
    }
    .sub-title {
      font-size: 1rem;
      color: #ffffff;
      margin-top: 0.5rem;
    }
  }
  .example {
    width: 95%;
    background-color: #ffffff;
    border-radius: 10px;
    position: absolute;
    left: 2%;
    top: 5rem;
    padding: 0.5rem;
    padding-left: 1rem;
    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text {
        color: #999;
      }
    }
    .flex-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text-align: center;
      text {
        color: #999;
      }
    }
  }
  .marginTop {
    margin-top: 0.5rem;
    .radio {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: 1px solid #999;
    }
    .radio-checked {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e43d33;
    }
  }
  .bottom {
    margin-top: 1rem;
  }
}
</style>
